<template>
    <div class="newObjectList">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-folder"></i> 项目部管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>进行中项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div class="title">进行中项目</div>
                <el-button
                    type="primary"
                    class="titleBtn"
                    icon="el-icon-plus"
                     @click="handleReport"
                >上报</el-button>
                <el-button type="primary" class="titleBtn1">导出</el-button>
            </div>
            <div class="project">
                <div class="titleName">
                    <div class="projectId">
                        <div>项目ID</div>
                        <div>ZJ123</div>
                    </div>
                    <div class="projectName">
                        <div>项目名称</div>
                        <div>德清县污水零直排项目</div>
                    </div>
                </div>
                <div class="projectContent">
                    <el-row :span="24" border>
                        <el-col :span="8" class="colList">
                            <div>登录密码</div>
                            <div>123456</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>合同总产值</div>
                            <div>400万</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>所属事业部</div>
                            <div>事业二部</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>工期</div>
                            <div>24个月</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>关联ID</div>
                            <div>xxx</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>类型</div>
                            <div>管线</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>开工时间</div>
                            <div>2020.01.23</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>区域(省)</div>
                            <div>浙江</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>实施状态</div>
                            <div>进行中</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24" style="width:838px;">
                        <el-col :span="24">
                            <span>操作</span>
                            <div class="textBtn"  >
                                <el-button
                                    type="text"
                                  @click="handleOutput()"
                                >产能信息表</el-button>
                                <el-button
                                    type="text"
                                   @click="handleDecompose()"
                                >细化分解表</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>


         <!-- 产值信息表弹出框 -->
        <el-dialog title="产值信息表" :visible.sync="outputVisible" width="590px" custom-class="output" :lock-scroll="false">
            <div class="tableBox">
                <table id="table">
                    <thead>
                        <tr>
                            <th class="tableTitle m1">序号</th>
                            <th class="tableTitle" style="width:120px">分项内容</th>
                            <th class="tableTitle">上报时间</th>
                            <th class="tableTitle">完成进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in stu" :class="index % 2 == 0 ? 'tr1' : 'tr2'" :key="index">
                            <td style="text-align:center">{{ index + 1 }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">
                                <el-progress :color="customColors" :percentage="item.coefficient" :format="format"></el-progress>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-dialog>
        <!-- 项目细化分解表 -->
        <el-dialog title="细化分解表" :visible.sync="decomposeVisible" width="70%" custom-class="output" :lock-scroll="false">
            <div class="tableBox">
                <table id="table">
                    <thead>
                        <tr>
                            <th class="tableTitle m1">序号</th>
                            <th class="tableTitle" style="width:120px">分项内容</th>
                            <th class="tableTitle">上报时间</th>
                            <th class="tableTitle">上次完成工作量</th>
                            <th class="tableTitle">合同单价</th>
                            <th class="tableTitle">当月完成产值</th>
                            <th class="tableTitle">当月完成工作量</th>
                            <th class="tableTitle">累计完成产值</th>
                            <th class="tableTitle">完成进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in stu" :class="index % 2 == 0 ? 'tr1' : 'tr2'" :key="index">
                            <td style="text-align:center">{{ index + 1 }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">
                                <el-progress :color="customColors" :percentage="item.coefficient" :format="format"></el-progress>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="progress">
                    <div>
                        <span>总进度</span>
                        <el-progress :color="customColors" :percentage="percentage" :format="format"></el-progress>
                    </div>
                </div>
                <div class="check">
                    <div class="division">
                        <p class="checkTitle">事业部审核</p>
                        <div class="ispass">
                            <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                            <p class="pass">已通过</p>
                        </div>
                    </div>
                </div>
                <!-- 意见审核 -->
                <div class="review">
                    <p>意见审核</p>
                    <el-input type="textarea" :rows="2" placeholder="请输入" v-model="textarea"> </el-input>
                </div>
                
            </div>
            <div class="tableBtnBox">
                <button class="btn1" @click="goBack">打回</button>
                <button class="btn2" @click="pass">通过</button>
            </div>
        </el-dialog>

         <!-- 上报信息 -->
        <el-dialog
            title="项目月进度上报信息审核"
            :visible.sync="reportVisible"
            width="70%"
            custom-class="output"
            :lock-scroll="false"
        >
            <div class="tableBox">
                <table id="table">
                    <thead>
                        <tr>
                            <th class="tableTitle m1">序号</th>
                            <th class="tableTitle" style="width:120px">分项内容</th>
                            <th class="tableTitle">上报时间</th>
                            <th class="tableTitle">本月工作量</th>
                            <th class="tableTitle">合同单价</th>
                            <th class="tableTitle">本月完成产值</th>
                            <th class="tableTitle">完成进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(item, index) in stu"
                            :class="index % 2 == 0 ? 'tr1' : 'tr2'"
                            :key="index"
                        >
                            <td style="text-align:center">{{ index + 1 }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">{{ item.date }}</td>
                            <td class="tdItem">{{ item.name }}</td>
                            <td class="tdItem">
                                <el-progress
                                    :color="customColors"
                                    :percentage="item.coefficient"
                                    :format="format"
                                ></el-progress>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tableBtnBox">
                <button class="btn1" @click="goBack">取消</button>
                <button class="btn2" @click="pass">上报</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '../../api/index';
export default {
    // name: 'basetable',
    data() {
        return {
             percentage: 80,//总进度
            textarea:'',//意见审核
            // idx: -1,
            // id: -1,
             outputVisible: false,
            decomposeVisible: false,
            reportVisible:false,
            stu: [
                { name: '张三', date: '2020.03.12', coefficient: 59 },
                { name: '里斯', date: '2020.03.12', coefficient: 80 },
                { name: '王五', date: '2020.03.12', coefficient: 92 },
                { name: '王五', date: '2020.03.12', coefficient: 10 },
            ],
            customColors: [
                { color: '#7ED321', percentage: 60 },
                { color: '#F5A623', percentage: 90 },
                { color: '#D0021B', percentage: 100 }
            ],
        };
    },
    created() {},
    methods: {
         // 点击产值信息表操作
        handleOutput() {
            // this.idx = index;
            // this.form = row;
            this.outputVisible = true;
        },
        //点击细化分解表操作
        handleDecompose() {
            // this.idx = index;
            // this.form = row;
            this.decomposeVisible = true;
        },
         //点击上传操作
        handleReport(){
            this.reportVisible=true;
        },
        //定义产值信息表进度颜色
        customColorMethod(percentage) {
            if (percentage < 60) {
                return '#909399';
            } else if (percentage < 90) {
                return '#e6a23c';
            } else {
                return '#67c23a';
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.container {
    min-height: 600px;
    padding-left:30px;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}
.titleBtn {
    background:rgba(33,74,143,1);
    color: #fff;
    border: none;
    font-size: 16px;
    width: 90px;
    height: 35px;
    text-align: center;
    margin-left: 66px;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    width: 90px;
     font-size: 16px;
    height: 35px;
    margin-left: 25px;
}
.project {
    // border:1px solid #eee;
     max-width: 850px;
     padding-left:30px;
    .titleName {
        height: 80px;
        width:583px;
        line-height: 80px;
        font-size: 20px;
        // border: 1px solid #eee;
        display: flex;
         justify-content: space-between;
        align-items: center;
        .projectId,.projectName{
          // width:350px;
          display: flex;
         
          div:nth-child(2){
            color:#666;
            margin-left:28px;
            // padding-left:28px
          }
        }  
    }
    
      
 }
    .projectContent{
        width:840px;
        /deep/ .el-col {
          height:44px;
          line-height: 44px;
          color:#333;
          font-size:16px;
          padding-left:22px;
         background:rgba(184,216,255,0.05);
         border:1px solid rgba(184,216,255,1);
         overflow:hide;
         margin-top:-1px;
         margin-left:-1px;
         display: flex;
         align-items: center;
        }
        .colList{
          div:nth-child(1){
            flex:2;
            color:#333;
            font-weight: 500;
          }
          div:nth-child(2){
            flex:3;
            font-size: 14px;
            font-weight: 400;
            color:#666;
          }
        }
        .textBtn{
          padding-left:65px;
        }
        
    }
    /* 产值信息表样式 */
.tableTitle {
    background: rgba(184, 216, 255, 0.2);
    border: 1px solid rgba(184, 216, 255, 1);
    margin: 0;
    min-width: 80px;
    height: 40px;
}
.newObjectList >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
.tr1 {
    height: 40px;
}
.tr2 {
    height: 40px;
    background: rgba(184, 216, 255, 0.05);
}
#table {
    width: 100%;
    border-collapse: collapse;
}
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;
}
.tableBox {
    min-height: 300px;
}
.doingObject/deep/.el-dialog__body {
    max-height: 600px;
    overflow-y: scroll;
}
.progress {
    width: 100%;
    border: 1px solid rgba(184, 216, 255, 1);
    border-top: none;
    box-sizing: border-box;
    height: 40px;
    padding: 0 20px;
    div {
        width: 300px;
        display: flex;
        height: 40px;
        align-items: center;
        span {
            width: 80px;
        }
    }
}
.check {
    margin-top: 20px;
    .division {
        width: 100px;
        border-right: 1px solid #cccccc;
        .checkTitle {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 22px;
        }
        .ispass {
            display: flex;
            align-items: center;
            .pass {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(7, 193, 96, 1);
            }
        }
    }
}
.review{
    margin-top:20px;
    p{
        font-size:16px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
margin-bottom: 10px;
    }
}
.tableBtnBox {
    margin-top:30px;
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>
